<template>
  <div class="formIndex">
    <el-page-header @back="goBack">
      <template #content>
        <div class="inlet">待办任务 > {{ category == '1' ? '融资单笔待办' :category == '2' ? '融资批量待办':category == '3' ? '非融单笔':'非融批量待办' }} > <span class="size">表单信息</span></div>
      </template>
    </el-page-header>

    <div class="auto">
      <template v-for="item in records">
        <component class="m_t_20" :code="item.code" :isAudit="true" :productId="productId"
          :is="FormComponents[item.tag]" :isEnabled="item.isEnabled" :vars="vars" ref="itemRefs" type="smallForm" />
      </template>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'
import { FormComponents } from '../../../components/formChildren/myComponents'
import { useRouter, useRoute } from 'vue-router'
import { formType } from '../../../type/service'
export default defineComponent({
  name: '',
  setup() {
    const data: formType = reactive({
      records: [],
      vars: null,
      category: '1',
      productId: '',
    })
    const router = useRouter()
    const route = useRoute()
    onBeforeMount(() => {
      let item = JSON.parse(localStorage.getItem('item'))
      
      item.forms.map(item => {
        if (item.category == 1) {
          item.code = item.tag
          item.tag = 'customize'
        }
      })
      data.records = item.forms
      // data.records = [
      //   {
      //     category:0,
      //      isEnable:1,
      //      nodeId:"1917414121829101569",
      //      tag:"fzBhjcsp",
      //   },
      //   {
      //     category:0,
      //      isEnable:1,
      //      nodeId:"1917414121829101569",
      //      tag:"fzCsjg",
      //   },
      //   {
      //     category:0,
      //      isEnable:1,
      //      nodeId:"1917414121829101569",
      //      tag:"rzSpyj",
      //   },
      //   {
      //     category:0,
      //      isEnable:1,
      //      nodeId:"1917414121829101569",
      //      tag:"rzShyj",
      //   },
      //   {
      //     category:0,
      //      isEnable:1,
      //      nodeId:"1917414121829101569",
      //      tag:"fzFkjg",
      //   },
      //   {
      //     category:0,
      //      isEnable:1,
      //      nodeId:"1917414121829101569",
      //      tag:"fzYjbsp",
      //   },
      //   {
      //     category:0,
      //      isEnable:1,
      //      nodeId:"1917414121829101569",
      //      tag:"rzPsjg",
      //   },
      //   {
      //     category:0,
      //      isEnable:1,
      //      nodeId:"1917414121829101569",
      //      tag:"rzYwdcyj",
      //   },
      //    {
      //     category:0,
      //      isEnable:1,
      //      nodeId:"1917414121829101569",
      //      tag:"rzFdbxxlr",
      //   },
      //   {
      //     category:0,
      //      isEnable:1,
      //      nodeId:"1917414121829101569",
      //      tag:"fzYqdcyj",
      //   },
      // ]
      data.vars = item.vars
      if (data.vars.projectData) {
        data.productId = data.vars.projectData.productId
      }
      data.category = route.query.category as string
    })
    const methods = {
      goBack() {
        router.go(-1)
      }
    }
    return {
      ...toRefs(data),
      FormComponents,
      ...methods
    }
  }
})
</script>
<style scoped lang='scss'>
.formIndex {
  width: calc(100% - 64px);
  height: calc(100% - 45px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 20px 32px 24px 32px;
  overflow-y: auto;
}

.auto {
  overflow-y: auto;
  height: calc(100% - 50px);
}
</style>